<!--  -->
<template>
  <div>
    <el-form class="main_project" ref="form" :model="sizeForm" label-width="80px" size="mini">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="projectQuery.filtering.name"></el-input>
      </el-form-item>
<!--      <el-form-item label="身份证号" prop="sfzh">-->
<!--        <el-input v-model="sizeForm.sfzh"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="监督类别" prop="jdlb">-->
<!--        <el-select v-model="sizeForm.jdlb" placeholder="请选择监督类别">-->
<!--          <el-option label="房建" value="0"></el-option>-->
<!--          <el-option label="市政" value="1"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="审核状态" prop="status">-->
<!--        <el-select v-model="sizeForm.status" placeholder="请选择上报状态">-->
<!--          <el-option label="新添加" value="0"></el-option>-->
<!--          <el-option label="已上报" value="1"></el-option>-->
<!--          <el-option label="审核未通过" value="2"></el-option>-->
<!--          <el-option label="审核通过" value="3"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item class="btn_main">
        <div class="btn_main_div">
          <el-button size="mini" type="primary" @click="find(projectQuery)"
          >查询</el-button
          >
          <el-button size="mini" @click="reset">重置</el-button>
          <el-button size="mini" @click="add(sizeForm)">新建项目</el-button>
<!--          <el-button size="mini" @click="examine(ids)">上报</el-button>-->
<!--          <el-button size="mini" @click="cancleExamine(ids)">取消上报</el-button>-->
<!--          <el-button size="mini" @click="deleteId(ids)">删除</el-button>-->
        </div>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      size="mini"
    >
      <el-table-column type="selection" width="55" > </el-table-column>
      <el-table-column align="center" prop="name" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="delivery_mode"  min-width="" label="投放模式">
        <template slot-scope="scope">{{ scope.row.delivery_mode=='MANUAL'?'手动投放':'自动投放' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="landing_type" label="推广目的">
        <template slot-scope="scope">
          <span v-if="scope.row.landing_type=='APP'">应用推广</span>
          <span v-if="scope.row.landing_type=='LINK'"> 销售线索推广</span>
          <span v-if="scope.row.landing_type=='MICRO_GAME'">小程序</span>
          <span v-if="scope.row.landing_type=='QUICK_APP'">快应用</span>
        </template></el-table-column>
      <el-table-column align="center" prop="marketing_goal" label="营销场景">
        <template slot-scope="scope">{{ scope.row.marketing_goal=='VIDEO_AND_IMAGE'?'短视频/图片':'直播' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="ad_type" label="广告类型">
        <template slot-scope="scope">{{ scope.row.ad_type=='ALL'?'所有广告':'搜索广告' }}</template>
      </el-table-column>
      <el-table-column align="center" prop="delivery_type" label="投放类型">
        <template slot-scope="scope">{{ scope.row.delivery_type=='NORMAL'?'常规投放':'周期稳投' }}</template>
      </el-table-column>
      <!--      <el-table-column align="center" prop="studyTime"  min-width="" label="总计学时">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column align="center" prop="themeName"  min-width="" label="学习专题名称">-->
      <!--      </el-table-column>-->
      <!--      <el-table-column align="center" prop="qualified" label="是否合格"> </el-table-column>-->
      <!--      <el-table-column align="center" prop="status" label="审核状态">-->
      <!--      </el-table-column>-->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="projectCPage1"
      :page-size="projectPageSize"
      layout="total, prev, pager, next"
      :total="projectTotal"
    >
    </el-pagination>
    <el-drawer
      title="新建项目"
      size="80%"
      :visible.sync="drawer">
      <add ref="child" ></add>

    </el-drawer>
  </div>
</template>

<script>
import add from './add.vue'
import axios from 'axios'
import { getProjectList, getToken } from '@/utils/jvliang/api'
export default {
  components: {
    add,
  },
  data() {
    //这里存放数据
    return {
      total: 0,
      jy_disabled: false,
      ids: [],
      sizeForm: {
        name: '',
        jdlb: '',
        sfzh: '',
        status: '',
        pageNum: 1,
        pageSize: 10
      },
      // 初始化
      reload_data: {
        name: '',
        jdlb: '',
        sfzh: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
      },
      // 获取项目列表
      projectQuery:{
        // advertiser_id: 1791411168359513,
        advertiser_id: 1785578883146761,
        filtering:{
          name:''
        },
        page: 1,
        page_size: 10
      },
      projectList:[],
      projectCPage1: 0, //当前页
      projectPageSize:0,
      projectTotal:0,   //总数
      projectPage:0,  //总页数
      tableData: [],
      drawer:false,
      test:[]
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.datalist(this.reload_data)
    this.token()
    this.project()
  },
  //方法集合
  methods: {
    // 获取token
    token(){
      getToken().then((response) => {
        if(response.data.code==0){
          localStorage.setItem('token',response.data.data.access_token)
        }
      })
    },
    project(){
      //   获取项目列表
      getProjectList(this.projectQuery).then(res=>{
        if(res.data.code==0){
          let d=res.data.data
          this.tableData=d.list
          this.projectTotal=d.page_info.total_number
          this.projectPage=d.page_info.total_page
          this.projectPageSize=d.page_info.page_size
          console.log(this.projectTotal,this.projectPage)
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.projectQuery.page=val
      this.project()
    },
    //   查询
    find(data) {
      console.log(data)
      this.project()
    },
    // 重置
    reset() {
      // this.$refs.form.resetFields()
      // this.reload_data.pageNum = 1
      // this.currentPage1 = 1 //当前页
      // this.datalist(this.reload_data)
      this.projectQuery.filtering.name=''
      this.projectQuery.page=1
      this.projectQuery.page_size=10
      this.project()
    },
    // 添加
    add() {
      // 子组件属性    recipeAdviceCard
      this.drawer=true
      // this.$refs.child.dialogFormVisible = !this.$refs.child.dialogFormVisible
    },




  },
}
</script>
<style scoped lang="scss">
#app {
  position: absolute;
  left: 0;
}
form.el-form {
  display: flex;
  justify-content: flex-start;
}
.btn_main {
  width: 515px;
  position: relative;
}
.btn_main_div {
  position: absolute;
  left: -70px;
  top: 0;
}
.btn {
  display: flex;
}
.el-form-item_content {
  margin-left: 0px !important;
}
.el-breadcrumb {
  padding: 0 0 0px 10px;
  background: white;
  line-height: 40px;
  height: 40px;
}
.main_project{
  margin-top: 20px;
}
/* .el-main{
  padding: 0!important;
}
.el-form-item {
    margin-bottom: 0!important;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
    margin-bottom: 0!important;
}
form.el-form {
    display: flex;
    justify-content: space-around;
     line-height: 40px;
    height: 40px;
    align-items: center;
} */

</style>
